<template>
	<view
		class="duty_card_box" 
		:style="dutyData[0].addType === DutyAddType.NO_SELF_ADD ? 'background-color:rgba(220,71,95,.1)' : 'background-color: #FFFFFF'"
		>
		<view class="duty_header">
			{{changeWeekByNum(dutyData[0].week)}} {{dutyData[0].time}}
		</view>
		<view class="duty_content">
			<view class="joiner">
				<view @click="clickDutyerFun(item)" class="avatar" v-for="item in dutyData" :key="item.id">
					<Avatar 
						:fileName="item.user_avatar" 
						size="68rpx"
						radius="68rpx"/>
					<view 
						class="close_btn_admin" 
						v-if="isAdminEdit && item.id !== Admin_Duty_One"
						@click="deleteDutyFun(item)"
					>
						<MyIcons size="30rpx" :src="joinSystemPath('closeRed2.png')"/>
					</view>
				</view>
			</view>
		</view>
		<view
			class="delete_all_btn fill_info" 
			v-if="fillInfo"
		>
			{{fillInfo}}
		</view>
		<view 
			class="delete_all_btn" 
			v-if="isAdminEdit"
			@click="deleteDutyFun(dutyData[0],true)"
		>
			<MyIcons size="30rpx" :src="joinSystemPath('deleteAll.png')"/>
		</view>
		<MyPopub 
			height="340rpx" 
			:isOpenPopub="openPopubFlag" 
			:slotsNums="isClickMine && chooseDuty.addType===DutyAddType.SELF_ADD  ? 3 : 1"
		>
			<template #1>
				<view class="pupub_item" @click="goDutyClock">
					{{isClickMine ? "值日打卡" : "打卡记录"}}
				</view>
			</template>
			<template #2>
				<view v-if="isClickMine" class="pupub_item" @click="editMyDutyFun">
					编辑我的值日
				</view>
			</template>
			<template #3>
				<view v-if="isClickMine" class="pupub_item" @click="openIsDeleteDutyModelFun">
					删除
				</view>
			</template>
		</MyPopub>
	</view>
</template>

<script setup>
	import {ref, computed} from 'vue'
	import moment from 'moment'
	import {
		changeWeekByNum
	} from '@/utils/changeData.js'
	import {
		joinSystemPath
	} from '@/utils/imgJoinName.js'
	import {
		DutyAddType
	} from '@/enum/GlobalEnum.js'
	import {
		dynamicStyleStore
	} from '@/stores/dynamicStyle.js'
	import {userStore} from '@/stores/user'

	const dynamicStyle_store = dynamicStyleStore()
	const user_store = userStore()
	
	const Admin_Duty_One = 'admin_add'
	
	const {
		primary_text_color,
		primary_hot_color
	} = dynamicStyle_store.dormitoryStyle	
	
	const props = defineProps({
		dutyData:{
			type:Array
		},
		fillInfo:{
			type:String
		},
		isAdminEdit:{
			type:Boolean,
			default:false
		},
	})
	const emits=defineEmits(['openEditDutyModalEmt','isDeleteDutyModelEmit','addModelDuthByAdminEmit','deleteDutyByAdminEdmit'])
	
	const openPopubFlag = ref(0)
	const chooseDuty=ref({})
	const editMyDutyFun=()=>{
		if(chooseDuty.value.addType === DutyAddType.NO_SELF_ADD){
			uni.$emit('tips','不能手动对轮流值日进行更改','warn',2000)
			return
		}
		openPopubFlag.value = -Math.random()
		emits('openEditDutyModalEmt',chooseDuty.value)
	}
	const deleteDutyFun=(item,isDeleteAll=false)=>{
		emits('deleteDutyByAdminEdmit',item,isDeleteAll)
	}
	//是否点的自己
	const isClickMine = computed(()=>chooseDuty.value?.user_id === user_store.userInfo.id)
	const clickDutyerFun=(item)=>{
		if(props.isAdminEdit){
			if(item.id !== Admin_Duty_One){
				return
			}
			const data = [...props.dutyData]
			data.shift()
			emits('addModelDuthByAdminEmit',item,data)
			return
		}
		const {createAt} = item
		const timeFormat = "YYYY-MM-DD"
		const nextDay = moment().add(1,'days').format(timeFormat)
		const dutyCreate = moment(createAt).format(timeFormat)
		if(nextDay===dutyCreate){
			uni.$emit('tips','打卡后生成的轮流值日在今天不允许操作','info',2000)
			return
		}
		openPopubFlag.value = Math.random()
		chooseDuty.value = item
	}
	const goDutyClock=()=>{
		openPopubFlag.value = -Math.random()
		uni.navigateTo({
			url:`/pages/Dormitory/DutyClock/DutyClock?dutyId=${chooseDuty.value.id}`
		})
	}
	const openIsDeleteDutyModelFun=()=>{
		if(chooseDuty.value.addType === DutyAddType.NO_SELF_ADD){
			uni.$emit('tips','不能手动对轮流值日进行更改','warn',2000)
			return
		}
		openPopubFlag.value = -Math.random()
		emits('isDeleteDutyModelEmit',chooseDuty.value)
	}
</script>

<style lang="less">
	.duty_card_box{
		margin-left: 10rpx;
		padding: 0 20rpx 5rpx 10rpx;
		background-color: #FFFFFF;
		border-radius:10rpx;
		position: relative;
		.delete_all_btn{
			position: absolute;
			top: 4rpx;
			right: 4rpx;
		}
		.fill_info{
			border-radius: 20rpx;
			font-size: 20rpx;
			color: #FFFFFF;
			background-color: v-bind(primary_hot_color);
			padding: 0 6rpx;
			right: 50rpx;
			top: 10rpx;
		}
		.duty_header{
			padding: 10rpx 0;
			font-size: 30rpx;
			color: v-bind(primary_text_color);
		}
		.duty_content{
			.joiner{
				margin-bottom: 20rpx;
				display: grid;
				grid-template-columns:repeat(8,68rpx);
				gap:10rpx;
				.avatar{
					margin-right: 10rpx;
					width: 70rpx;
					position: relative;
				}
				.close_btn_admin{
					position: absolute;
					top: -16rpx;
					right: -6rpx;
				}
			}
		}
		.pupub_item{
			width: 100%;
			display: flex;
			justify-content: center;
		}
	}
</style>